---
sidebar_position: 1
---

import { GettingStartedExample } from '../src/components/examples/GettingStartedExample';

# Getting started

## Introduction

This react cropper library is built on the [`advanced-cropper`](https://github.com/advanced-cropper) core. It's the official
binding for React and it belongs to the advanced croppers family that based on the same core and philosophy.

### Motivation

There are many different croppers. No point in creating another one without a clear vision of something special that would be distinguish it from another croppers.

The core idea was to create the cropper that would be native for the used framework and give the developer possibility to
customize and extend it in a familiar way. It began with simple stencil component replacement, but now this library gives the almost full control over a cropper to a developer.
Ranging from appearance to behavior details.

During the development another important part was creating the smooth and lovely experience for cropper users. This resulted in
appearing of solid mobile support, transitions and many other features that are integral part of this cropper now.

As a result, this cropper is a ready out the box with the polished default behavior, predefined themes, etc, and
unlimited power to customize almost every its aspect.

## Package installation

To use this library you should install it with `npm` or `yarn`

```shell
npm install -S react-advanced-cropper
```

```shell
yarn add react-advanced-cropper
```

Then import the `Cropper` component and the styles somewhere:

```ts
import { Cropper } from 'react-advanced-cropper'
import 'react-advanced-cropper/dist/style.css';
```
## Minimal working example

The example below shows the usage of the cropper inside some arbitrary component.

<GettingStartedExample/>

```tsx
import React, { useState } from 'react';
import { CropperRef, Cropper } from 'react-advanced-cropper';
import 'react-advanced-cropper/dist/style.css'

export const GettingStartedExample = () => {
	const [image, setImage] = useState(
		'https://images.unsplash.com/photo-1599140849279-1014532882fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80',
	);

	const onChange = (cropper: CropperRef) => {
		console.log(cropper.getCoordinates(), cropper.getCanvas());
	};

	return (
		<Cropper
			src={image}
			onChange={onChange}
			className={'cropper'}
		/>
	)
};
```

If you need to change the behavior of the cropper (for example, you want to create a fixed one for mobile devices),
please read [this detailed article](/docs/guides/cropper-types) about the different variants of croppers.
